<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>discover</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/mine.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./js/dis.js"></script>
    <script src="./js/common.js"></script>
 
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</head>
<script>
   
</script>
<body>
    <div class="main pd12">
        <div class="top flex_x between pd12">
            <div class="t_left">
                <img src="./static/image/Snipaste_2023-11-28_15-57-24.png" alt="">
            </div>
          <a href="./search.html">
            <div class="t_right">
                <img class="mr_20" src="./static/image/Component 22.svg" alt="">
            </div>
          </a>
        </div>
    <div class="mi_con txt_center">
        <img src="./static/image/2.png" alt="">
    </div>
    <div class="p_con txt_center">
        <h4 class="">Harper</h4>
        <div class="infos">
            <span>Malaysia</span>
            <span>22</span>
        </div>
        <div class="edite margin0" style="margin-top: 10px;">Edit</div>
    </div>
    <div class="info_content mt_16 margin0 flex_x around txt_center algin_center">
       <a href="./myfav.html">
        <div class="info_item flex_y between">
            <span>My Favorite</span>
            <span class="font_blod">3</span>
        </div>
       </a>
        <div class="info_item flex_y between">
            <span>Donwload</span>
            <span  class="font_blod">0</span>
        </div>
        <div class="info_item flex_y between">
            <span>Recently played </span>
            <span  class="font_blod">3</span>
        </div>
    </div>
          <!-- 我的侧边栏内容框 -->
          <div class="mine pos_a txt_center">
            <img class="bgs" src="./static/image/5.png" alt="">
            <img  src="./static/image/2.png" class="margin0 mt_20" alt="">
            <div>Harper</div>
            <div class="sl_content flex_y between">
                <div class="sl_item">News</div>
                <div class="sl_item">Set up</div>
                <div class="sl_item">Feedback</div>
                <div class="sl_item">About us</div>
            </div>
            <div class="sign_out txt_center">Sign Out</div>
          </div>
<div class="tabs flex_x around mt_16">
    <div class="flex_y start txt_center"> <span>Playlists I Created</span> 
    <img class="line margin0 mt_16" src="./static/image/Vector 11.svg" alt="">
    </div>
    <div> <span>My Collection</span></div>
</div>
<div class="s_list margin0 mt_16  txt_center">
    <div class="sl_top flex_x end pd12 border_box">
        <i class="iconfont mr_20">&#xe767;</i>
        <i class="iconfont">&#xe8c4;</i>
    </div>
    <div class="sl_item flex_x start">
        <img src="./static/image/Rectangle 40.png" class="mr_20" alt="">
        <div class="flex_y start">
            <span class="font_14">Driving Playlist</span>
            <span class="mt_16 font_9">25 songs</span>
        </div>
    </div>
    <div class="sl_item flex_x start">
        <img src="./static/image/Rectangle 41.png" class="mr_20" alt="">
        <div class="flex_y start">
            <span class="font_14">Relaxing Playlist</span>
            <span class="mt_16 font_9">32 songs</span>
        </div>
    </div>
</div>
<div class="bott pos_f">
    <img class="pos_a detailss" src="./static/image/imgbin_bubble-transparency-and-translucency-png 8.png" alt="">
    <div class="taggle pos_a">
        <div class="t_top flex_x around">
            <i class="iconfont mt_10">&#xe78a;</i>
            <i class="iconfont font_24 pause btns" >&#xe624;</i>
            <i class="iconfont mt_10">&#xe7a5;</i>
        </div>
        <div class="t_bot font_12 mt_16">Thinking Out Loud</div>
    </div>
</div>
    </div>
    <!-- 底部tab -->
    <div class="tab flex_x around algin_center ">
       <a href="./discover.html">   
        <div class="tab_item flex_y txt_center algin_center ">
            <img src="./static/image/headset.svg" alt="">
            <span class="mt_16">discover</span>
        </div>
       </a>
        <div class="disnone">
            <img src="./static/image/Vector 19.svg" alt="">
        </div>
        <div class="tab_item flex_y txt_center algin_center active">
            <img src="./static/image/Vector 2.svg" alt="">
            <span class="mt_16">My</span>
        </div>
        <a href="./favorate.html">
            <div class="tab_item flex_y txt_center algin_center">
                <img src="./static/image/Vector 2.svg" alt="">
                <span class="mt_16">Favorite</span>
            </div>
        </a>
       
    </div>
</body>
</html>